const path = require("path");

module.exports = {
    //入口 要打包哪个文件
    entry: "./src/main.js",
    //出口 打包成文件
    output: {
        //绝对路径C:\Users\Administrator\Desktop\xiangmu2\Vue3\webpack\01_初识_webpack   引入包获取当前文件所在路径
        path: path.resolve(__dirname, "./build"),  //打包之后的文件夹名
        filename: "bundle.js"    //打包之后的文件名
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // loader: "css-loader"  //写法一
                // use: ["css-loader"]   //写法二
                use: [                  //写法三
                    "style-loader",      //因为loader的执行顺讯从右向左或者说从下往上、从后到前，所以我们把style-loader写到前面。因为需要先加载css-loader再加载style-loader

                    // { loader: "css-loader"}
                    "css-loader",

                    //1.配置好loader给样式加浏览器前缀   
                    // {
                    //     loader: "postcss-loader",
                    //     options: {
                    //         postcssOptions: {
                    //             plugins: [
                    //                 require('autoprefixer')
                    //             ]
                    //         }
                    //     }
                    // }
                    // 2.如果这里不配置就回去找postcss.config.js 看有没有导出一个对象
                    "postcss-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            }
        ]
    }
}